<template>
  <div class="article-info">
    <div class="info-arrow"></div>
    <div class="info-content">
      <div class="article-header">
        <img :src="authorAvatar" class="author-avatar">
        <div class="meta">
          <h3 class="title">{{ article.title }}</h3>
          <div class="sub-info">
            <span class="author">{{ authorName }}</span>
            <span class="date">{{ formatDate(article.creationTime) }}</span>
          </div>
          <div class="sub-info">
            <el-icon><Location /></el-icon>
            <span>{{ locationText }}</span>
          </div>
        </div>
      </div>
      <div class="article-body">
        {{ article.content }}
        <el-button size="small" @click="$emit('view-detail', article.articleID)">查看详情</el-button>
      </div>
      <button class="close-btn" @click="$emit('close')">×</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Location } from "@element-plus/icons-vue";
import { ref, onMounted } from 'vue';
import MapUtils from '@/utils/Map/MapUtils';
import { UserProfileApi } from '@/api/new/userProfleApi.js';

const props = defineProps({
  article: {
    type: Object,
    required: true
  }
});

// 作者信息
const authorName = ref('未知用户');
const authorAvatar = ref('');

// 地址信息
const locationText = ref('正在获取位置...');

const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleDateString();
}

// 获取默认头像URL
const getDefaultAvatarUrl = () => {
  return 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
};

// 获取作者信息
const fetchAuthorInfo = async () => {
  if (props.article && props.article.authorID) {
    try {
      const authorInfo = await UserProfileApi.getUserInfo(props.article.authorID);
      authorName.value = authorInfo.username || '未知用户';
      authorAvatar.value = authorInfo.headshot || getDefaultAvatarUrl();
    } catch (error) {
      console.error('获取作者信息失败:', error);
      authorName.value = '未知用户';
      authorAvatar.value = getDefaultAvatarUrl();
    }
  } else {
    authorName.value = '未知用户';
    authorAvatar.value = getDefaultAvatarUrl();
  }
};

// 获取地址信息
const fetchLocationInfo = async () => {
  if (props.article && props.article.longitude && props.article.latitude) {
    try {
      const addressInfo = await MapUtils.getAddressByLocation(
        props.article.longitude,
        props.article.latitude
      );
      
      // 如果能获取到详细地址，则显示省市区街道
      if (addressInfo.city && addressInfo.district) {
        locationText.value = `${addressInfo.city} ${addressInfo.district}`;
        if (addressInfo.street) {
          locationText.value += ` ${addressInfo.street}`;
        }
      } else {
        // 否则显示格式化的地址
        locationText.value = addressInfo.formattedAddress || '未知位置';
      }
    } catch (error) {
      console.error('获取地址信息失败:', error);
      locationText.value = '位置信息获取失败';
    }
  } else {
    locationText.value = '未知位置';
  }
};

onMounted(() => {
  fetchAuthorInfo();
  fetchLocationInfo();
});
</script>

<style lang="less" scoped>
.article-info {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 280px;
  max-width: 320px;

  .info-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #fff;
  }

  .info-content {
    padding: 16px;
    position: relative;

    .article-header {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;

      .author-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        object-fit: cover;
      }

      .meta {
        flex: 1;

        .title {
          margin: 0;
          font-size: 16px;
          color: #333;
          line-height: 1.4;
        }

        .sub-info {
          margin-top: 4px;
          font-size: 12px;
          color: #666;

          span + span {
            margin-left: 8px;
            padding-left: 8px;
            position: relative;

            &::before {
              content: "•";
              position: absolute;
              left: -4px;
              color: #999;
            }
          }
        }
      }
    }

    .article-body {
      font-size: 14px;
      color: #444;
      line-height: 1.6;
      max-height: 120px;
      overflow-y: auto;
      display: flex;
      justify-content: space-between;
    }
  }

  .close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    line-height: 1;

    &:hover {
      color: #666;
    }
  }
}
</style>
